<template>
  <div>
	  <header class="home-header" v-if="pageName==='homePage'">
	  	<span class="icon iconfont">&#xe61d;</span>
	  	<p class="clear logo-txt"><!-- <span class="h-logo"></span> --><span>{{myTitle}}</span></p>
	  	<p class="clear logo-logandreg">
	  		<router-link to="/login"><span class="icon iconfont">&#xe607;</span></router-link>
	  		<router-link to="/reg"><span class="icon iconfont">&#xe606;</span></router-link>
	  	</p>
	  </header>
	  <header v-else>{{myTitle}}</header>
  </div>
</template>

<script>
export default {
  props:{
  	pageName:String,
    myTitle:String
  }
}
</script>
<style lang="scss" scoped>
header {
  height: 2rem;
  line-height: 2rem;
  background:#f30007;
  color:#fff;
  text-align:center;
}
.home-header {
  position: relative;  
  font-size: 90%;
  >span.iconfont {
  	display:block;
	width: 2rem;
	height: 2rem;
	position: absolute;
	left:0;
	top:0;	
	font-size: 160%;
	color: #fff;
  }
  p.logo-txt{
  	width:50%;
  	margin: 0 auto;
  	position: relative;
  	color: #fff;
  	span {
  		color: #fff;
  	}
  	/*.h-logo {
  		display: block;
  		width: 1.4rem;
  		height: 1.4rem;
  		position: absolute;
  		left:50%;
  		top:50%;
  		margin: -.7rem 0 0 -4.5rem;
  		background: url("../assets/images/logo-alone.png") no-repeat center center;
  		background-size: 100%;
  	}*/
  }
  p.logo-logandreg {
  	position: absolute;
  	right: 0;
  	top:0;
  	a {
  	  display: inline-block;
  	  width: 2rem;
  	  height: 2rem;
  	  float: left;
  	  font-size:85%;
  	  margin-left: .5rem;
  	  span {
  	  	font-size: 180%;
  	  	color:#fff;
  	  }
  	}
  }
}
</style>

